<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>立体酒杯</title>
    <style type="text/css">
        *{padding:0;
            margin:0;
        }
        html,body{background:#ccc;
        }
        /*整体盒子对人的距离*/
        #box{
            margin: 200px auto;
            perspective: 1000px;
            -webkit-perspective: 1000px;
            -moz-perspective: 1000px;
            -ms-perspective: 1000px;
        }
        .x_rot {
            transform-style: preserve-3d;
            transform: rotateX(-30deg);
        }
        .y_rot {
            transform-style: preserve-3d;
            transform: rotateY(10deg);
        }
        .y_rot div {
            position: absolute;
            height: 235px;
            width: 235px;
            left: 300px;
            opacity: 0.75;
            border-radius: 15px;
            transition:all .3s linear;
        }
        .y_rot div#i1 {
            transform: rotateY(0deg) translateZ(200px);
        }
        .y_rot div#i2 {
            transform: rotateY(60deg) translateZ(200px);
        }
        .y_rot div#i3 {
            transform: rotateY(120deg) translateZ(200px);
        }
        .y_rot div#i4 {
            transform: rotateY(180deg) translateZ(200px);
        }
        .y_rot div#i5 {
            transform: rotateY(240deg) translateZ(200px);
        }
        .y_rot div#i6 {
            transform: rotateY(300deg) translateZ(200px);
        }
        .y_rot div img {
            height:235px;
            width:235px;
            border-radius: 15px;
            transition:all .3s linear;
        }
        /*滑动y轴 里面图片效果*/
        .y_rot div:hover {
            opacity: 1;
        }
        .y_rot div:hover  img{
            height:335px;
            width:335px;
            margin-left:-50px;
            margin-top:-50px;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="x_rot">
        <div class="y_rot">
            <div id="i1">
                <img src="img/1.jpg" />
            </div>
            <div id="i2">
                <img src="img/2.jpg" />
            </div>
            <div id="i3">
                <img src="img/3.jpg" />
            </div>
            <div id="i4">
                <img src="img/4.jpg" />
            </div>
            <div id="i5">
                <img src="img/5.jpg" />
            </div>
            <div id="i6">
                <img src="img/6.jpg" />
            </div>
        </div>
    </div>
</div>
</body>
</html>